<template>
    <a-form 
        :model="props.formState"
        ref="formRenderRef"
        layout="vertical" 
        :label-col="{ span: 6 }" 
        :wrapper-col="{ span: 18 }"
    >
        <!-- <a-form-item label="申请人" name="username">
            <span>{{ props.formState.realName }}|{{ props.formState.account }}</span>
        </a-form-item> -->
        <component 
            v-for="item in props.widgets"
            :is="`xy-r-${item.type}`"
            :widget="item"
            :formState="props.formState"
        >
        </component>
    </a-form>
</template>

<script setup lang="ts">
import type { BaseWidgetType } from '@/xyFDesigner/type';
import type { FormInstance } from 'ant-design-vue';
import { onBeforeMount, reactive, ref } from 'vue';
import { useUserInfo } from '@/stores/userInfo';
import { storeToRefs } from 'pinia';

const props = withDefaults(defineProps<{
    widgets:BaseWidgetType[],
    formState:any
}>(),{
    widgets:()=>[]
})

const userInfoStore = useUserInfo()
const {state:userInfoState} = storeToRefs(userInfoStore)

const formRenderRef = ref<FormInstance>()

const state = reactive<any>({
})

const submit = async ()=>{
    await formRenderRef.value?.validate()
    console.log("数据",props.formState);
}

const initForm = async ()=>{
    const userInfo = userInfoState.value
    Object.assign(props.formState,{
        realName:userInfo.userInfos.realName,
        userId:userInfo.userInfos.id,
        account:userInfo.userInfos.account,
    })
}


onBeforeMount(()=>{
    initForm()
})

defineExpose({
    submit
})
</script>

<style lang="scss" scoped>
:deep(.ant-form-item){
    margin-bottom: 5px;
}
</style>